


<template>
  <div>
      <h2>Mine   - Mine -  个人中心   </h2>
      <h2>test = {{ data.test }} </h2>
      <button @click="changeTest">修改test1 </button>
      <button @click="changeDataTest('区区小雪2222')">修改test2 </button>
      <button @click="changeTestAsync">修改test3 - 异步</button>

      <button @click="changeListAsync">获取list </button>
      <button @click="changeCommentsAsync">获取comments  </button>

      <h2>message == {{ message }}</h2>
      <h2> counter = {{ counter  }}</h2>
      <button @click="changeMessage('元宵节快乐哦')">修改message</button>
      <button @click="changeCounter(12)">修改counter </button>
      <h2>text = {{ text }} </h2>
      <p>
        <input type="text" v-model="text"    >
      </p>
      <ul>
        <li v-for="(item,index) in data.list" :key="index">
            <h2>{{ item.title }} - {{ index+1 }}</h2>
        </li>
      </ul>

      <ul>
        <li v-for="(item,index) in comments" :key="index">
            <h2>{{ item.title }} - {{ item.content }}</h2>
        </li>
      </ul>
  </div>
</template>

<script>
import { mapActions, mapMutations, mapState } from 'vuex'
export default {
  computed:{
    ...mapState([
      'data',
      'comments',

    ]),
    ...mapState('obj',['message','counter']),
    text:{
      get(){
        return this.$store.state.text
      },
      set(v){
        // v-model 主动修改了
        console.log(v)
        this.changeText(v)  // 修改数据的唯一方式必须是提交commit mutations
      }
    }
  },
  methods:{
    // changeTest(){
    //   this.$store.dispatch('changeTest')
    // },
    ...mapActions([
      'changeTest',  // this.changeTest = this.$store.dispatch('changeTest') 发送action
      'changeTestAsync',
      'changeListAsync',
      'changeCommentsAsync'
    ]),
    ...mapMutations([
      'changeDataTest',
      'changeText'
    ]),
    ...mapMutations('obj',['changeMessage','changeCounter'])
  }
}
</script>
